<!--服务记录填写!-->
<template>
    <div class="service-record-container">
        <div class="card-header">
            <order-status-bar :orderDetial="orderDetial"> </order-status-bar>
        </div>
        <div :style="{ paddingBottom: '10px' }">
            <div class="card">
                <div class="card-content card-radius card-margin">
                    <div class="content-item">
                        <div class="content-item-label">
                            {{ $st("wp_Repair_request_Time") }}
                        </div>
                        <div class="content-item-text">
                            {{ orderDetial.createtime || "--" }}
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="content-item-label">
                            {{ $st("wp_Problem_Description") }}
                        </div>
                        <div class="content-item-text">
                            {{ orderDetial.content || "--" }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-title card-margin">
                    <div>{{ $st("wp_Progress") }}</div>
                    <collapse-button v-model:isExpand="isExpendSteps"> </collapse-button>
                </div>
                <div
                    class="card-content operatetype-collapse-group"
                    :style="{ '--heightVar': heightVar }"
                >
                    <van-steps
                        height="80"
                        direction="vertical"
                        :active="0"
                        active-color="#1890ff"
                    >
                        <van-step
                            v-for="(child, index) in steps"
                            :key="index">
                            <div class="status-text">
                                {{ child.status
                                }}<span
                                    class="time-text"
                                    :style="{ float: 'right' }">{{
                                        child.time
                                    }}</span>
                            </div>
                            <p class="time-text">{{ child.desc }}</p>
                            <template #inactive-icon>
                                <div class="inactive-circle" />
                            </template>
                            <template #active-icon>
                                <div class="active-double-circle">
                                    <div class="state" />
                                </div>
                            </template>
                        </van-step>
                    </van-steps>
                </div>
            </div>

            <div class="card">
                <div class="card-title card-margin">
                    {{ $st("wp_Service_Information") }}
                </div>
                <div v-if="showbtn">
                    <wp-form-group
                        ref="serviceinfoformgoup"
                        :formProp="serviceinfoprop"
                        :groupRules="grouprules"
                        v-model="orderDetial"
                    >
                        <template #administrator>
                            <van-field
                                :label="$st('Principal')"
                                v-model="orderDetial.administrator"
                                type="tel"
                                input-align="right"
                                readonly
                            >
                            </van-field>
                        </template>
                    </wp-form-group>
                    <wp-form-group
                        ref="serviceinfoformgoup"
                        class="remark-formgroupclass"
                        :formProp="serviceinforemarkprop"
                        :groupRules="grouprules"
                        v-model="orderDetial"
                    >
                        <template #servicerecordremark>
                            <div class="tworow-field">
                                <van-field
                                    :label="$st('wp_Remark')"
                                    :placeholder="'200' + $st('wp_Within_the_word')"
                                    v-model="orderDetial.servicerecordremark"
                                    type="textarea"
                                    label-width="100%"
                                    maxlength="200"
                                    show-word-limit
                                    :readonly="!showbtn"
                                    autosize
                                >
                                </van-field>
                            </div>
                        </template>
                        <template #servicepictures>
                            <div class="service-attachments-orderfile-container">
                                <label
                                    class="attachments-label"
                                    :style="{float:'left'}">{{ $st('wp-zhao-pian-fu-jian-shang-chuan-zai-50mb-yi-nei') }}</label>
                                <order-file-uploader
                                    v-model:attachments="orderDetial.servicepictures"
                                    :imgmaxcount="5"/>
                            </div>
                        </template>
                    </wp-form-group>
                </div>
                <div
                    v-else
                    class="card-content card-radius card-margin">
                    <div class="content-item">
                        <div class="content-item-label">{{ $st("Repair_Order_Principal") }}</div>
                        <div class="content-item-text">
                            {{ orderDetial.administrator || "--" }}
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="content-item-label">{{ $st('wp-gong-si-ming-cheng') }}</div>
                        <div class="content-item-text">
                            {{ orderDetial.customer_id || "--" }}
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="content-item-label">
                            {{ $st("wp_Repair_request_type") }}
                        </div>
                        <div class="content-item-text">
                            {{ [orderDetial.repairtype].toString() || "--" }}
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="content-item-label">
                            {{ $st("wp_Service_method") }}
                        </div>
                        <div class="content-item-text">
                            {{ [orderDetial.servicemode].toString() || "--" }}
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="content-item-label">
                            {{ $st("wp_solution") }}
                        </div>
                        <div class="content-item-text">
                            {{ [orderDetial.solution].toString() || "--" }}
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="content-item-label">
                            {{ $st("wp_Factory_Number") }}
                        </div>
                        <div class="content-item-text">
                            {{ [orderDetial.servmanufacturecode].toString() || "--" }}
                        </div>
                    </div>
                    <div class="content-item">
                        <div class="content-item-label">
                            {{ $st("wp_Remark") }}
                        </div>
                        <div class="content-item-text">
                            {{ orderDetial.servicerecordremark || "--" }}
                        </div>
                    </div>
                    <img-file-list :attachments="orderDetial.servicepictures"></img-file-list>
                </div>
            </div>
            <div
                v-if="!showbtn && orderDetial.signature"
                class="card">
                <div class="card-title card-margin">
                    {{ $st('wp-ke-hu-qian-ming') }}
                </div>
                <div
                    class="card-content card-radius card-margin">
                    <div class="signature-time">{{orderDetial.signaturetime}}</div>
                    <van-image
                        @click="onShowImages(orderDetial.signature)"
                        :src="orderDetial.signature"
                    />
                </div>
            </div>
        </div>
        <!-- <van-tabbar
            v-show="showbtn"
            style="padding: 15px"
            placeholder>
            <van-tabbar-item>
                <template #icon>
                    <van-button
                        round
                        class="footer-button handle-button"
                        @click="handleRecord"
                    >{{ $st("wp_Processed") }}</van-button
                    >
                </template>
            </van-tabbar-item>
            <van-tabbar-item>
                <template #icon>
                    <van-button
                        round
                        type="primary"
                        class="footer-button save-button"
                        @click="saveRecord"
                    >{{ $st("wp_save") }}</van-button
                    >
                </template>
            </van-tabbar-item>
        </van-tabbar> -->
        <order-bottom-panel
            v-if="showbtn"
            :buttons="buttons" />
        <signature-dialog
            :dialogShow="signatureShow"
            @cancel="cancelDialog"
            @submit="submitSignature"
        ></signature-dialog>
    </div>
</template>
<script>
import { reactive, ref, onMounted, computed, watch, toRefs, onUnmounted } from 'vue';
import OrderStatusBar from '@/components/maintenance_control/common/OrderStatusBar.vue';
import CollapseButton from '@/components/_common/CollapseButton.vue';
import { getRepairDataSetup } from '@/setup/repair/RepairOptionsSetup.js';
import { getRepairStatusData } from '@/setup/repair/RepairStautsFormat.js';
import OrderBottomPanel from '@/components/maintenance_control/common/OrderBottomPanel.vue';
import useMaintenanceInfoSetup from '@/setup/maintenanceteam/MaintenanceCustomInfoSetup';
import { useRoute, useRouter } from 'vue-router';
import Cookies from 'js-cookie';
import { useStore } from 'vuex';
import { showError } from '@/util/MessageDeal.js';
import moment from 'moment';
import _ from 'lodash';
import { selfI18n } from '@/i18n';
import OrderFileUploader from '@/components/maintenance_control/repairreport/repaircommon/OrderFileUploader.vue';
import ImgFileList from '@/components/_common/ImgFileList.vue';
import SignatureDialog from './dialog/signatureDialog.vue';
import { ImagePreview } from 'vant';

export default {
    components: { OrderStatusBar, CollapseButton, OrderBottomPanel, OrderFileUploader, ImgFileList, SignatureDialog },
    setup () {
        const store = useStore();

        const route = useRoute();
        const router = useRouter();
        const $st = selfI18n;
        const isExpendSteps = ref(false);
        const { operatortypeformat, operatorDescFormat, getManuCode } = getRepairStatusData();
        const state = reactive({ orderDetial: {}, customers: [], manucoderes: [], heightVar: '80px' });
        const repairlistprop = [
            {
                id: 'createtime',
                label: $st('wp_Repair_request_Time'),
                readonly: true
            },
            {
                id: 'content',
                label: $st('wp_Problem_Description'),
                itemmarginright: '0%',
                formtype: 'textarea',
                isrequired: true,
                size: 'large',
                placeholder: '200' + $st('wp_Within_the_word')
            }
        ];
        const operatorprop = [
            {
                id: 'schedule'
            }
        ];
        const repairTypeColumns = computed(() => {
            const values = [];
            for (const item of store.state.repair_types_map) {
                values.push(item.value);
            }
            return values; // Object.values(values);
        });
        const serviceModeColumns = computed(() => {
            const values = [];
            for (const item of store.state.service_mode_map) {
                values.push(item.value);
            }
            return values; // Object.values(values);
        });
        const solutionModeColumns = computed(() => {
            const values = [];
            for (const item of store.state.solution_mode_map) {
                values.push(item.value);
            }
            return values; // Object.values(values);
        });
        const customerColumns = computed(() => {
            return state.customers.map((item) => { return item.customer_name; });
        });
        const manucodeColumns = computed(() => {
            return state.manucoderes;
        });
        const serviceinfoprop = [
            {
                id: 'administrator',
                label: $st('Repair_Order_Principal'),
                readonly: true
            },
            {
                id: 'customer_id',
                label: $st('wp-gong-si-ming-cheng'),
                isrequired: true,
                formtype: 'iselselect',
                columns: customerColumns,
                placeholder: $st('wp_Please_choose'),
                readonly: false
            },
            {
                id: 'repairtype',
                label: $st('wp_Repair_request_type'),
                isrequired: true,
                formtype: 'ismultipleselect',
                columns: repairTypeColumns,
                placeholder: $st('wp_Please_choose'),
                readonly: false
            },
            {
                id: 'servicemode',
                label: $st('wp_Service_method'),
                isrequired: true,
                formtype: 'iselselect',
                columns: serviceModeColumns,
                placeholder: $st('wp_Please_choose'),
                readonly: false
            },
            {
                id: 'solution',
                label: $st('wp_solution'),
                isrequired: true,
                formtype: 'ismultipleselect',
                columns: solutionModeColumns,
                placeholder: $st('wp_Please_choose'),
                readonly: false
            },
            {
                id: 'servmanufacturecode',
                label: $st('wp_Factory_Number'),
                columns: manucodeColumns,
                readonly: false,
                formtype: 'ismultipleselect',
                placeholder: $st('wp_Please_choose')
            }
        ];
        const serviceinforemarkprop = [
            {
                id: 'servicerecordremark',
                label: $st('wp_Remark')
            },
            {
                id: 'servicepictures',
                label: $st('wp_Appendix'),
                size: 'large'
            }
        ];
        const grouprules = {
            customer_id: [
                { required: true, message: $st('wp_Please_select_a_customer') }
            ],
            repairtype: [
                {
                    required: true,
                    message: $st('wp_Please_classify_your_repair_request')
                }
            ],
            servicemode: [
                {
                    required: true,
                    message: $st('wp_Please_select_how_you_want_to_be_serviced')
                }
            ],
            solution: [
                {
                    required: true,
                    message: $st('wp_Please_select_the_solution_you_prefer')
                }
            ]
        };
        const activeCollapseName = ref(['1']);
        const collapseTitle = ref($st('wp_Expand'));

        const { refreshservicerecord, getOneRepairRecord, handlerepair } = getRepairDataSetup();
        const { queryCustomerRecorf } = useMaintenanceInfoSetup();

        const steps = ref([]);
        // const customers = ref([]);

        const timeformat = (date) => {
            return moment(date).format('YYYY-MM-DD HH:mm:ss');
        };

        // 根据客户id找到客户名
        const convSelectedItemLabel = (arr, key, propName) => {
            const find = arr.find((child) => child[propName] === key);
            if (!find) {
                return key;
            }
            const tmp = find.customer_name || key;
            return tmp;
        };
        // 后端参数数据翻译成前台展示
        const dataTranslate = (orderDetial) => {
            console.log(store.state.repair_types_map);
            // 展示报修类别repairtype
            orderDetial.repairtype = orderDetial.repairtype.map((child) => store.state.repair_types_map.find((item) => item.key === child)?.value || child);

            // 展示服务方式servicemode
            orderDetial.servicemode = store.state.service_mode_map.find((item) => item.key === orderDetial.servicemode)?.value || orderDetial.servicemode;

            // 展示解决方法solution
            orderDetial.solution = orderDetial.solution.map(
                (child) => store.state.solution_mode_map.find((item) => item.key === child)?.value || child
            );
        };

        // 查看图片
        const onShowImages = (src) => {
            ImagePreview({
                images: [src]
            });
        };

        const repairid = route.query.repairid;
        const principalFormatter = () =>
            state.orderDetial.administratoralias
                ? `${state.orderDetial.administrator}(${state.orderDetial.administratoralias})`
                : state.orderDetial.administrator;

        onMounted(async () => {
            const username = Cookies.get('username');
            const res = await getOneRepairRecord({ repairid, username });
            const tmpOrderDetial = res.value; ;
            // 调整参数
            dataTranslate(tmpOrderDetial);

            state.orderDetial = tmpOrderDetial;
            // state.recordattachment = tmpOrderDetial.attachments;

            state.orderDetial.schedule.sort((a, b) => {
                return moment(b.createtime) - moment(a.createtime);
            });
            state.orderDetial.createtime = timeformat(state.orderDetial.createtime);
            state.orderDetial.signaturetime = state.orderDetial.signaturetime ? timeformat(state.orderDetial.signaturetime) : '';
            // 维修进度状态翻译(int=>字符)
            steps.value = state.orderDetial.schedule.map((child) => {
                return {
                    id: child.operatetype,
                    status: operatortypeformat(child.operatetype),
                    time: timeformat(child.createtime),
                    desc: operatorDescFormat(child)
                };
            });
            if (steps.value.length === 0) {
                state.heightVar = '0px';
            }

            state.orderDetial.administrator = principalFormatter();
            // 客户列表
            var tmpcustomers = await queryCustomerRecorf();
            for (const item of tmpcustomers.value) {
                state.customers.push(item);
            }

            // customers.value = tmpcustomers.value;
            // 展示为客户名字
            state.orderDetial.customer_id = convSelectedItemLabel(
                state.customers,
                state.orderDetial.customer_id,
                'customer_id'
            );
            // tmpcustomers.value.map((item) => {
            //     serviceinfoprop[1].columns.push(item.customer_name);
            // });
            // 设备出厂编号
            const tmpmanucoderes = await getManuCode({ repairid: repairid });

            tmpmanucoderes.value.forEach((value) => {
                state.manucoderes.push(value);
                // serviceinfoprop[5].columns.push(value);
            });

            if (
                state.orderDetial.administrator.split('(')[0] ===
          Cookies.get('username') &&
        state.orderDetial.status === '2'
            ) {
            } else {
                serviceinfoprop.forEach((x) => {
                    x.readonly = true;
                });
                serviceinforemarkprop.forEach((x) => {
                    x.readonly = true;
                });
            }
        });

        const showbtn = computed(() => {
            if (
                state.orderDetial.administrator &&
        state.orderDetial.administrator.split('(')[0] ===
          Cookies.get('username') &&
        state.orderDetial.status === '2'
            ) {
                return true;
            } else {
                return false;
            }
        });
        watch(isExpendSteps, (newVal, oldVal) => {
            if (newVal) {
                // 收缩
                state.heightVar = 'auto';
            } else {
                // 展开
                // state.heightVar = '80px';
                if (steps.value.length !== 0) {
                    state.heightVar = '80px';
                }
            }
        });

        onUnmounted(() => {
            document.body.removeAttribute('class', 'van-overflow-hidden');
        });

        return {
            router,
            principalFormatter,
            repairid,
            repairlistprop,
            operatorprop,
            activeCollapseName,
            collapseTitle,
            serviceinfoprop,
            steps,
            refreshservicerecord,
            handlerepair,
            grouprules,
            timeformat,
            dataTranslate,
            showbtn,
            serviceinforemarkprop,
            operatorDescFormat,
            getOneRepairRecord,
            operatortypeformat,
            convSelectedItemLabel,
            isExpendSteps,
            onShowImages,
            ...toRefs(state)
        };
    },
    data () {
        return {
            isExpanded: true, // 展开状态
            buttons: [
                {
                    text: 'wp_Processed',
                    callback: this.handleRecord
                },
                {
                    isPrimary: true,
                    text: 'wp_save',
                    callback: this.saveRecord
                }
            ],
            signatureShow: false
        };
    },
    methods: {
        collapseToggle () {
            if (this.isExpanded) {
                // 收缩
                this.isExpanded = false;
                this.collapseTitle = this.$st('wp_Collapse');
                this.heightVar = 'auto';
            } else {
                // 展开
                this.isExpanded = true;
                this.collapseTitle = this.$st('wp_Expand');
                this.heightVar = '85px';
                // if (this.steps.length !== 0) {
                //     this.heightVar = '127px';
                // }
            }
        },
        saveRecord: _.throttle(function () {
            const params = this.convRecordParams();
            console.log('params');
            console.log(params);
            this.refreshservicerecord(params, () => {
                this.router.push({
                    name: 'maintenancelist'
                });
            });
        }, 500),
        // saveRecord () {
        //     this.saveRecordTh();
        // },
        convRecordParams () {
            const customerArray = this.customers.filter(
                (child) => child.customer_name === this.orderDetial.customer_id
            );
            let customer = { customer_id: this.orderDetial.customer_id };
            if (customerArray.length > 0) {
                customer = customerArray[0];
            }
            // const attach = [];

            const params = {
                customer_id: customer.customer_id,
                repairid: this.orderDetial.repairid,
                servermanufacturecode: this.orderDetial.servmanufacturecode,
                servicerecordremark: this.orderDetial.servicerecordremark,
                repairtype: this.orderDetial.repairtype.map((child) =>
                    this.convSelectedItemValue(this.$store.state.repair_types_map, child)
                ),

                servicemode: this.convSelectedItemValue(
                    this.$store.state.service_mode_map,
                    this.orderDetial.servicemode
                ),

                solution: this.orderDetial.solution.map((child) =>
                    this.convSelectedItemValue(this.$store.state.solution_mode_map, child)
                ),
                servicepictures: JSON.parse(JSON.stringify(this.orderDetial.servicepictures)).map((item) => {
                    return JSON.parse(JSON.stringify(item));
                    // return attach;
                })
            };
            return params;
        },
        convSelectedItemValue (columns, label) {
            // 根据值找到key
            // console.log(columns, label);
            //     const tmp =
            // Object.keys(columns).find((child) => columns[child] === label) || '';
            //     return tmp;
            // const value = {};
            var tmp = columns?.find((child) => child.value === label);

            // value[tmp.key] = tmp.value;

            return tmp?.key || '';
        },
        handleRecord () {
            const findEmpty = Object.keys(this.grouprules).map((child) => {
                if (Object.keys(this.orderDetial).indexOf(child) >= 0) {
                    // console.log(this.orderDetial[child]);
                    // console.log('是否为空:' + !this.orderDetial[child]);
                    // console.log(this.$st('wp_Is_it_an_array_or_not') + Array.isArray(this.orderDetial[child]));
                    // console.log(this.$st('wp_Length') + this.orderDetial[child].length);
                    if (
                        !this.orderDetial[child] ||
                        (this.orderDetial[child] &&
                         Array.isArray(this.orderDetial[child]) &&
                         this.orderDetial[child].length === 0)
                    ) {
                        return true;
                    }
                }
                return false;
            });
            // console.log(findEmpty);
            if (findEmpty.indexOf(true) >= 0) {
                showError(
                    this.$st(
                        'wp_A_parameter_is_leaved_empty,_please_enter_the_correct_value_for_it'
                    )
                );
                return;
            }

            this.$refs.serviceinfoformgoup.submitForm(() => {
                this.signatureShow = true;
                /* showConfirm(
                    this.$st('wp_After_Order_Processed_Service_Is_Completed'),
                    confirm
                ); */
            });
        },
        async initRecordData () {
            const param = {
                repairid: this.repairid
            };
            const res = await this.getOneRepairRecord(param);
            this.orderDetial = res.value;
            this.orderDetial.schedule.sort((a, b) => {
                return moment(b.createtime) - moment(a.createtime);
            });
            this.orderDetial.createtime = this.timeformat(
                this.orderDetial.createtime
            );
            // 维修进度状态翻译(int=>字符)
            this.steps.splice(0, this.steps.length);
            this.orderDetial.schedule.map((child) => {
                this.steps.push({
                    id: child.operatetype,
                    status: this.operatortypeformat(child.operatetype),
                    time: this.timeformat(child.createtime),
                    desc: this.operatorDescFormat(child)
                });
            });
            // 处理步骤
            console.log(this.steps);
            if (this.isExpanded) {
                // 收缩
                this.heightVar = '127px';
                // if (this.steps.length === 0) {
                //     this.heightVar = '45px';
                // }
            } else {
                // 展开
                this.heightVar = 'auto';
            }
            // 初始参数翻译展示
            this.dataTranslate(this.orderDetial);
            // 展示为客户名字
            this.orderDetial.customer_id = this.convSelectedItemLabel(
                this.customers,
                this.orderDetial.customer_id,
                'customer_id'
            );

            this.serviceinfoprop.forEach((x) => {
                x.readonly = true;
            });
            this.serviceinforemarkprop.readonly = true;

            this.$router.go(-1);
        },

        cancelDialog () {
            this.signatureShow = false;
        },

        submitSignature (signature) {
            const params = this.convRecordParams();
            params.signature = signature;
            console.log(params);
            // 状态更改为待评价
            this.handlerepair(params, () => {
                this.initRecordData();
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.service-record-container {
    .van-field__control {
        color: #969799;
    }
    .red {
        color: red;
    }
}
.card-header {
  padding: 0px 15px 0px 15px;
  background-color: white;
}
.tworow-field {
  .van-cell {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }
}
.service-attachments-orderfile-container{
        display:flex;
        flex-direction:column;
        // .attach-file-upload{
        //     padding:15px 10px;
        //     margin:0;
        // }
        .attachments-label{
        opacity: 1;
        font-size: 10px;
        font-weight: Normal;
        text-align: LEFT;
        color: rgba(0,0,0,0.60);
        line-height: 18px;
        margin:15px 15px 0px;
    }
    }
.remark-formgroupclass {
  .van-form {
    padding-top: 10px;
    background: #f0f0f0;
  }
  .van-cell-group--inset {
    margin-left: 0px;
    margin-right: 0px;
    border-radius: 0px;
  }
  .tworow-field {
    .van-cell {
      display: inline-block;
      vertical-align: middle;
      text-align: center;
    }
  }
}
.operatetype-collapse-group {
  //height: 127px;
  height: var(--heightVar);
  overflow: hidden;
  .van-cell {
    padding: 0px;
    background: #ededed;
  }
  .van-steps--vertical {
    // margin-left: 15px;
  }
  .van-collapse {
    padding-right: 15px;
  }
  .van-collapse-item__content {
    padding: 0px;
  }
}
.record-button-cell {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  background-color: white;
  .handle-button {
    font-size: 18px;
    color: #000000;
    //width: 168px;
    width: calc((100vw - 40px) / 2);
    height: 40px;
    opacity: 1;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 21px;
    margin: 7px 0px 6px 15px;
  }
  .save-button {
    font-size: 18px;
    color: #ffffff;
    //width: 168px;
    width: calc((100vw - 40px) / 2);
    height: 40px;
    opacity: 1;
    background: #1890ff;
    border-radius: 20px;
    margin: 7px 15px 6px 9px;
  }
}
.inactive-circle {
  width: 10px;
  height: 10px;
  opacity: 1;
  background: #1890ff;
  border-radius: 50%;
}
.status-text {
  opacity: 1;
  font-size: 17px;
  font-weight: 500;
  text-align: LEFT;
  color: #000000;
}
.time-text {
  opacity: 1;
  font-size: 13px;
  font-weight: Normal;
  text-align: LEFT;
  color: rgba(0, 0, 0, 0.4);
}

.active-double-circle {
  width: 22px;
  height: 22px;
  padding: 4px;
  opacity: 1;
  box-sizing: border-box;
  background: rgba(24, 144, 255, 0.3);
  border-radius: 50%;
  .state {
    width: 14px;
    height: 14px;
    opacity: 1;
    background: #1890ff;
    border-radius: 50%;
  }
}
.footer-button {
  width: 108px;
  height: 40px;
}
.process-title {
  //标题样式
  height: 30px;
  color: rgba(0, 0, 0, 0.85);
  padding-left: 15px;
  padding-top: 2px;
  line-height: 30px;
  margin-top: 10px;

  display: flex;
  justify-content: space-between;
}
.info-title {
  //标题样式
  height: 30px;
  color: rgba(0, 0, 0, 0.85);
  padding-left: 15px;
  padding-top: 2px;
  line-height: 30px;
  margin-top: 10px;
}

.card {
  font-size: 13px;
  margin-bottom: 15px;
}
.card-margin {
  margin: 5px 15px 10px 15px;
}
.card-radius {
  border-radius: 10px;
}
.card-title {
  display: flex;
  justify-content: space-between;
}
.card-content {
  background-color: white;
  margin-top: 10px;
  padding: 10px 15px 10px 15px;
}

.content-item {
  width: 100%;
  display: flex;
  padding-top: 5px;
  padding-bottom: 5px;
  align-items: center;
}
.content-item-label {
  text-align: left;
  min-width: 100px;
  width: 20%;
  color: rgba(0, 0, 0, 0.6);
}

.content-item-text {
  flex-grow: 1;
  word-wrap: break-word;
  word-break: break-word;
  /* width: calc(100% - 120px); */
}

.signature-time {
    color: rgba(0,0,0,0.45);
    font-size: 13px;
    margin-bottom: 10px;
}
</style>
